<template>
	<view class="container">
		<view class="example">
			<uni-forms ref="form" :model="getIn" labelWidth="100px">
				<uni-forms-item label="进站车辆" name="carHeadNum" required>
					<uni-data-select v-model="getIn.carHeadNum" :localdata="carInfoList" @change="changeCarInfo">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="进站名" name="stationId" required>
					<uni-data-select v-model="getIn.stationId" :localdata="stationInfoList"
						@change="changeStationInfo"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="进站确认人" name="confirmPerson">
					<uni-easyinput v-model="getIn.confirmPerson" disabled />
				</uni-forms-item>
				<uni-forms-item label="进站确认时间" name="confirmTime">
					<uni-datetime-picker v-model="confirmTime"></uni-datetime-picker>
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import { getRecentCarInfoList } from "@/api/gas/register"
	import { getStationInfoList } from "@/api/base/station"
	import { getUserProfile } from "@/api/system/user"
	import { addGetInInfo } from "@/api/gas/get_in"
	import format from '@/plugins/format.js'

	export default {
		data() {
			return {
				stationInfoList: [],
				stationInfoList_s: {},
				carInfoList: [],
				carInfoListRaw: [],
				confirmTime: "",
				getIn: {
					confirmPerson: "",
					confirmTime: "",
					carHeadNum: "",
					stationId: "",
					stationName: ""
				},
				user: {
					nickName: "",
					phonenumber: ""
				},
				rules: {
					carCode: {
						rules: [{
							required: true,
							errorMessage: '预约车辆不能为空'
						}]
					},
					stationId: {
						rules: [{
							required: true,
							errorMessage: '进站不能为空'
						}]
					}
				}
			}
		},
		onLoad() {
			this.initTime();
			this.getRecentCarInfoList();
			this.getStationInfoList();
			this.getUser();
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
					this.getIn.confirmPerson = this.user.nickName
				})
			},
			initTime() {
				this.confirmTime = new Date();
				this.getIn.confirmTime = format( this.confirmTime, 'YYYY-MM-DD HH:mm:ss')
			},
			getStationInfoList() {
				getStationInfoList().then(response => {
					var data = [],
						data_s = {};
					response.rows.forEach(function(row, index) {
						var stationInfo = {
							text: row.stationName,
							value: row.stationId
						}
						data.push(stationInfo)
						data_s[row.stationId] = row.stationName
					})
					this.stationInfoList = data
					this.stationInfoList_s = data_s
				})
			},
			getRecentCarInfoList() {
				var params = {}, now = new Date();
				params.registerTime = format(now, 'YYYY-MM-DD HH:mm:ss')
				now.setDate(now.getDate() - 5);
				params.createTime = format(now, 'YYYY-MM-DD HH:mm:ss')
				params.status = '0'
				getRecentCarInfoList(params).then(response => {
					var data = [];
					response.rows.forEach(function(row, index) {
						var carInfo = {
							text: row.carHeadNum,
							value: row.carHeadNum
						}
						data.push(carInfo)
					})
					this.carInfoList = data
					this.carInfoListRaw = response.rows
				})
			},
			changeCarInfo(e) {
				var arr = this.carInfoListRaw
				this.carInfoListRaw.find(data => {
					if(data.carHeadNum == e) {
						this.getIn.registerId = data.registerId
					}
				})
			},
			changeStationInfo(e) {
				this.getIn.stationName = this.stationInfoList_s[e]
			},
			submit(ref) {
				this.$refs.form.validate().then(res => {
					addGetInInfo(this.getIn).then(response => {
						if (response.code == '200') {
							this.$modal.msgSuccess("进站记录成功")
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		line-height: 35px;
		margin-left: 10px;
	}
</style>
